<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/vue-2.6.12.js"></script>
    <script type="text/javascript" src="../js/axios-0.21.0.js"></script>
</head>
<body>
<div id="root">
    <div class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a href="./main.html" class="navbar-brand">在线珠宝商城</a>

            </div>
            <span v-if="user !== null" class="navbar-text">欢迎您：<a href="">{{user.userName}}</a></span>
            <ul v-if="user === null" class="nav navbar-nav">
                <li><a href="../login.html" class="navbar-link"><span class="text-primary">登录</span></a></li>
                <li class="divider"></li>
                <li><a href="../register.html" class="navbar-link"><span class="text-primary">注册</span></a></li>
            </ul>
            <ul class="nav navbar-nav" v-if="user !== null">
                <li><a href="#" @click.prevent="logout" class="navbar-link"><span class="text-primary">退出登录</span></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="cart/cart.html">
                        <svg height="15" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             viewBox="0 0 489 489" style="enable-background:new 0 0 489 489;" xml:space="preserve">
                        </svg>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <form action="search-jewelry.html">
                    <div class="input-group navbar-btn">
                        <input type="text" name="bookName" placeholder="搜索珠宝名" id="" class="form-control">
                        <div class="input-group-btn">
                            <button type="submit" class="btn btn-danger"><span
                                    class="glyphicon glyphicon-search"></span></button>
                        </div>
                    </div>
                </form>
            </div>

        </div>

        <div class="navbar navbar-default">
            <div class="container-fluid">
                <ol class="breadcrumb navbar-left navbar-btn">
                    <span>你当前所在的位置：</span>
                    <li><a href="main.html">珠宝</a></li>
                    <li><a href="#">一级类别</a></li>
                    <li class="active"><a href="#">二级类别</a></li>
                </ol>

                <ul class="pager navbar-right navbar-btn">
                    <li>第 <span>{{pageInfo.current}}</span> 页</li>
                    <li><a href="#" @click.prevent="page(pageInfo.current - 1)">上一页</a></li>
                    <li><a href="#" @click.prevent="page(pageInfo.current + 1)">下一页</a></li>
                    <li>共 <span>{{pageInfo.pages}}</span> 页</li>
                </ul>

            </div>

        </div>

        <div class="row">
            <div class="col-md-3">
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <h5 class="panel-title">分类浏览</h5>
                    </div>
                    <div class="panel-body">
                        <ul>
                            <li><a href="" @click.prevent="getJewelry()">全部</a></li>
                            <li v-for="category in categories" :key="category.categoryId">
                                <a href="category-jewelry.html"
                                   @click.prevent="getJewelryPro(category.parentId, category.categoryId)">
                                    <span class="text-info">{{category.categoryName}}</span>
                                </a>
                            </li>
                        </ul>


                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <ul class="media-list">
                            <div v-for="product in pageInfo.records" :key="product.productId">
                                <li class="media">
                                    <div class="media-left media-middle">
                                        <a :href="'jewelry-detail.html?productId=' + product.productId"><img class="media-object"
                                                                           :src="'http://localhost:8080/images/' + product.imageUrl"
                                                                           alt="" style="width:150px"></a>
                                    </div>
                                    <div class="media-body">
                                        <a :href="'jewelry-detail.html?productId=' + product.productId"><h5 class="text-primary">{{product.productName}}</h5>
                                        </a>
                                        <hr>
                                        <p class="small text-muted">材质：<span>{{product.material}}</span></p>
                                        <p class="small text-muted">颜色：<span>{{product.color}}</span>
                                            重量：<span>{{product.weight}} 克拉</span></p>
                                        <p class="small text-muted">纯度：<span>{{product.purity}}</span></p>
                                        <p class="small text-muted">工艺：<span>{{product.craftsmanship}}</span></p>
                                        <p>{{product.certification}}</p>
                                        <p>{{product.desc}}</p>
                                        <p>
                                            <del >￥{{product.price}}</del>
                                            <strong style="color:red">￥{{product.jprice}}</strong> 节省：{{product.price
                                            - product.jprice}}
                                            <a href="" class="btn btn-danger"  @click.prevent="putCart(product.productId)">加入购物车</a>
                                        </p>
                                    </div>
                                </li>
                                <hr>
                            </div>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: "#root",
        data: {
            searchPage: {
                pId: 0,
                cId: 0,
                pageNum: 1,
                pageSize: 5
            },
            user: null,
            categories: {},
            pageInfo: {}
        },
        created() {
            this.isLogin();
            const queryString = location.search;
            const urlParams = new URLSearchParams(queryString);
            this.searchPage.pId = urlParams.get('pId');
            this.searchPage.cId = urlParams.get('cId');
            this.getChildrenCategory();
            this.getJewelry();
        },
        methods: {
            isLogin() {
                axios.get('/user').then(res => {
                    this.user = res.data.data;
                })
            },
            /**
             * 获取子类别
             */
            getChildrenCategory() {
                axios.get(`/category/${this.searchPage.pId}`).then(res => {
                    if (res.status === 200) {
                        this.categories = res.data.data;
                    }
                });
            },
            /**
             * 通过类别获取当前类别下的珠宝
             */
            getJewelry() {
                axios.get('/pro', {
                    params: this.searchPage
                }).then(res => {
                    if (res.status === 200) {
                        this.pageInfo = res.data.data;
                    }
                });
            },
            logout(){
                axios.get('/user/logout').then(res => {
                    alert('退出成功');
                    location.href = '/front/main.html';
                })
            },
            getJewelryPro(pId, cId) {
                this.searchPage.pId = pId;
                this.searchPage.cId = cId;
                this.getJewelry();
            },
            page(size) {
                if (size === 0) {
                    alert('已经是第一页了');
                    return;
                }
                if (size === this.pageInfo.pages + 1) {
                    alert('已经是最后一页了');
                    return;
                }
                this.searchPage.pageNum = size;
                this.getJewelry();
            },
            putCart(productId){
                if (this.user === null) {
                    alert('请先登录！');
                    location.href = '../login.html';
                    return;
                }
                console.log(productId)
                axios.get("/cart/putCart?productId="+productId)
                location.href="/front/cart/cart.html"
            }
        }
    });
</script>
</html>